<template>
  <div class="count-down">
    <!-- 12点场 00:32:18 -->
    <span class="count-down-end-time">{{ endHours }}点场</span>
    <span class="count-down-surplus">{{ surplus | filterTime }}</span>
  </div>
</template>

<script>
import { setInterval, clearInterval } from 'timers';
/**
 * 接收一个时间(时间场)，自动计算时间并且倒计时
 */
export default {
  props: {
    endHours: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      // 展示活动状态
      surplus: '',
      // 活动开始差距秒数
      diffSeconds: 0,
      interval: undefined
    };
  },
  created() {
    this.computedSurplusTime();
  },
  methods: {
    /**
     * 计算时间
     */
    computedSurplusTime() {
      if (this.interval) clearInterval(this.interval);
      const date = new Date();
      /**
       * 当前时间大于活动时间，活动已结束
       */
      if (date.getHours() > this.endHours) {
        this.surplus = '活动已结束';
        return;
      }

      /**
       * 当前时间等于活动时间，活动进行中
       */
      if (date.getHours() === this.endHours) {
        this.surplus = '活动进行中';
        return;
      }

      /**
       * 当前时间小于活动时间，活动未开始，进行倒计时,
       * -1 表示 预计时间为 16点 ， 当前为 12点00分，
       * 那么差距应该是 3个小时 59分 59秒，而不是4个小时
       */
      const diffHours = this.endHours - date.getHours() - 1;
      const diffMinutes = 60 - date.getMinutes() - 1;
      const diffSeconds = 60 - date.getSeconds();
      /**
       * 获取差距秒数
       */
      this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds;
      this.interval = setInterval(() => {
        this.diffSeconds -= 1;
      }, 1000);
    }
  },
  watch: {
    /**
     * 监听秒数变化，转化为对应的时间，
     * 时间补0，可以直接在这里补0，也可以使用 filters 去补0，
     * 课程中为了介绍filters的概念，将使用 filters 补0
     */
    // eslint-disable-next-line no-unused-vars
    diffSeconds(newV, oldV) {
      // math.floor  向下取整
      /**
       * 当前的秒数 / 3600 向下取整 获取所有的小时数
       * 当前的秒数 / 60 向下取整 获取所有的分钟数，对 60 进行取模，获取到超过小时的分钟数
       * 当前秒数直接对 60 取模 ， 获取单独的描述
       */
      const hours = Math.floor(newV / 3600);
      const minutes = Math.floor(newV / 60) % 60;
      const seconds = newV % 60;
      this.surplus = hours + ':' + minutes + ':' + seconds;

      // 如果当前倒计时秒数已经为 0 的情况下，重新去计算时间
      if (newV === 0) {
        this.computedSurplusTime();
      }
    },
    /**
     * 父组件主动修改了时间的话，
     * 那么重新计算时间
     */
    endHours() {
      this.computedSurplusTime();
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../styles/style.scss';

.count-down {
  display: flex;
  font-size: px2rem(14);
  margin-left: $marginSize;

  span {
    display: inline-block;
    padding: px2rem(2) px2rem(4) px2rem(2) px2rem(4);
  }

  &-end-time {
    background-color: $mainColor;
    border-top-left-radius: px2rem(4);
    border-bottom-left-radius: px2rem(4);
    border: px2rem(1) solid $mainColor;
    color: white;
  }

  &-surplus {
    background-color: white;
    border-top-right-radius: px2rem(4);
    border-bottom-right-radius: px2rem(4);
    color: $mainColor;
    border: px2rem(1) solid $mainColor;
  }
}
</style>
